<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../base.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
    <!-- 页面meta -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>数据 - AdminLTE2定制版</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=0jEkITPUglyGdYflcwjQI1IhBGtXoeGO"></script>
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #routeBtn {
            height: 30px;
            background: #5679ea;
            border: 0;
            padding: 0 10px 0 10px;
            margin-right: 8px;
            cursor: pointer;
            border-radius: 2px;
            color: #fff;
            font-size: 14px;
        }

        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 7.5rem;
            position: fixed;
            top: 5rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }

    </style>
</head>

<body>
<center>
    <div>
        装运港：<input type="text" id="startId" size="20" style="width:150px;"/> 卸货港：
        <input type="text" id="endId" size="20" style="width:150px;"/>
        <button id="routeBtn">查询路线</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <%--<button id="subwayBtn" onclick="subwayOncheck()">地铁查询</button>--%>
    </div>
</center>
<div class="info">您可以按住鼠标右键控制地图旋转、修改倾斜角度，并且可手动输入装运港和卸货港查询路线</div>
<div id="allmap"></div>
</body>
<script>
    function subwayOncheck() {
        location.href = "${ctx}/baiduMap/map/subway.do";
    }
</script>
<script type="text/javascript">

    //输入框的自动输入联想
    new BMap.Autocomplete({"input": "startId"});
    new BMap.Autocomplete({"input": "endId"});

    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();

    var startPoint = '${start}';
    var endPoint = '${end}';

    // 获得起始坐标
    $('#startId').blur(function () {
        // 将地址解析横、纵 坐标
        myGeo.getPoint($(this).val(), function (point) {
            if (point) {
                startPoint = point;
                console.log("startPoint：" + startPoint);
            }
        }, "中国");
    });

    // 获得结束坐标
    $('#endId').blur(function () {

        myGeo.getPoint($(this).val(), function (point) {
            if (point) {
                endPoint = point;
                console.log("endPoint：" + endPoint);
            }
        }, "中国");
    });
</script>

<script>
    /*以下：百度地图 定位相关控件*/
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    // map.centerAndZoom("北京", 10);
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);
    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function (e) {
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        // alert("当前定位地址为：" + address);
    });
    geolocationControl.addEventListener("locationError", function (e) {
        // 定位失败事件
        alert(e.message);
    });

    map.addControl(geolocationControl);
    /*以上：百度地图 定位相关控件*/


    /*以下：百度地图 轨迹运动/单个点沿线运动*/
    var point = new BMap.Point(116.331398, 39.897445);

    /*var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);

            map.panTo(r.point);
            point = new BMap.Point(r.point.lng,r.point.lat);
            map.centerAndZoom(point,12);
            mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        }
        else {
            map.centerAndZoom(point,12);
        }
    },{enableHighAccuracy: true})*/

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


    //以下均为页面加载事件，任选其一
    /*$(document).ready(function () {
            var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(50, 90), { //小车图片
                //offset: new BMap.Size(0, -5),    //相当于CSS精灵
                imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
            });
            var driving2 = new BMap.DrivingRoute(map, {
                renderOptions: {
                    map: map,
                    autoViewport: true
                }
            }); //驾车实例
            driving2.search(startPoint, endPoint); //显示一条公交线路

            window.run = function () {
                var driving = new BMap.DrivingRoute(map);    //驾车实例
                driving.search(startPoint, endPoint);
                driving.setSearchCompleteCallback(function () {
                    var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                    var paths = pts.length;    //获得有几个点

                    var carMk = new BMap.Marker(pts[0], {icon: myIcon});
                    map.addOverlay(carMk);
                    carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    i = 0;

                    function resetMkPoint(i) {
                        carMk.setPosition(pts[i]);
                        if (i < paths) {
                            setTimeout(function () {
                                i++;
                                resetMkPoint(i);
                            }, 100);
                        }
                    }

                    setTimeout(function () {
                        resetMkPoint(5);
                    }, 100)

                });
            }

            setTimeout(function () {
                run();
            }, 1500);
        }

    );*/
    $(function () {
            var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(50, 90), { //小车图片
                //offset: new BMap.Size(0, -5),    //相当于CSS精灵
                imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
            });
            var driving2 = new BMap.DrivingRoute(map, {
                renderOptions: {
                    map: map,
                    autoViewport: true
                }
            }); //驾车实例
            driving2.search(startPoint, endPoint); //显示一条公交线路

            window.run = function () {
                var driving = new BMap.DrivingRoute(map);    //驾车实例
                driving.search(startPoint, endPoint);
                driving.setSearchCompleteCallback(function () {
                    var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                    var paths = pts.length;    //获得有几个点

                    var carMk = new BMap.Marker(pts[0], {icon: myIcon});
                    map.addOverlay(carMk);
                    carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    i = 0;

                    function resetMkPoint(i) {
                        carMk.setPosition(pts[i]);
                        if (i < paths) {
                            setTimeout(function () {
                                i++;
                                resetMkPoint(i);
                            }, 1);
                        }
                    }

                    setTimeout(function () {
                        resetMkPoint(5);
                    }, 10)

                });
            }

            setTimeout(function () {
                run();
            }, 10);
        }
    )
    /*以上：百度地图 轨迹运动/单个点沿线运动*/


    $('#routeBtn').click(function () {
            var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(50, 90), { //小车图片
                //offset: new BMap.Size(0, -5),    //相当于CSS精灵
                imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
            });
            var driving2 = new BMap.DrivingRoute(map, {
                renderOptions: {
                    map: map,
                    autoViewport: true
                }
            }); //驾车实例
            driving2.search(startPoint, endPoint); //显示一条公交线路

            window.run = function () {
                var driving = new BMap.DrivingRoute(map);    //驾车实例
                driving.search(startPoint, endPoint);
                driving.setSearchCompleteCallback(function () {
                    var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                    var paths = pts.length;    //获得有几个点

                    var carMk = new BMap.Marker(pts[0], {icon: myIcon});
                    map.addOverlay(carMk);
                    carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    i = 0;

                    function resetMkPoint(i) {
                        carMk.setPosition(pts[i]);
                        if (i < paths) {
                            setTimeout(function () {
                                i++;
                                resetMkPoint(i);
                            }, 1);
                        }
                    }

                    setTimeout(function () {
                        resetMkPoint(5);
                    }, 10)

                });
            }

            setTimeout(function () {
                run();
            }, 10);
        }
    )
</script>
</html>